<template>
	<view class="home clearfix ">
		<image src="/static/order/stores.png" class="stross" mode=""></image>
		<cu-custom bgColor="bg-transparent text-white" isBack>
			<block slot="content"></block>
			<block slot="right">
				<view class="search-box px15 flex align-center justify-between" @click="pushPage('/pages/goods/search')">
					<view class="flex align-center wp100  px15">
						<image src="/static/home/seo.png" class="block15"></image>
						<text class="ml10 text-info f12">搜索商品...</text>
					</view>
				</view>
			</block>
		</cu-custom>
		<!-- notice -->
		<view class=" bg-white flex flex-direction align-center pb20 mx15 mt30 por">
			<image :src="storepic" class="mt25 block50 round"></image>
			<text class="mt10 f18">{{storename}}</text>
			<view class="flex align-center f12 text-info mt15">
				<text>共{{storenum}}件商品</text>
				<text class="mx5">|</text>
				<text>{{storegznum}}人关注</text>
			</view>
			<view class="gzbox mt15 flex align-center justify-center" v-if="collect==0" @click="collects">
				<view class="flex align-end">
					<text class="f14 cuIcon-add text-red"></text>
					<text class="f12">关注</text>
				</view>
			</view>
			<view class="gzbox mt15 flex align-center justify-center bg-danger " v-else @click="collects">
				<text class="text-white f12">已关注</text>
			</view>
			<view class="store-line"></view>
			<view class="flex align-center justify-between px40 wp100 mt15">
				<view class="flex align-center">
					<image src="/static/order/addresss.png" class="shop-live"></image>
					<text class="ml8 maxaddress">{{address}}</text>
				</view>
			</view>
		</view>
		<!-- notice -->
		<view class="flex align-center wp100 ovscolle mt10 bg-white" v-if="list.length!=0">
			<view class="flex align-center justify-between  pt15 bg-white">
				<view class="flex flex-direction align-center w160" v-for="(item,index) in list" :key="index" @click="choice(item,index)">
					<text class="f14 text-black" :class="{choice:index==classactive}">{{item.name}}</text>
					<view class="class-choice mt15" v-if="index==classactive"></view>
					<view class="class-nochoice mt15 bg-white" v-else></view>
				</view>
			</view>
		</view>
		<scroll-view class="scroll-view stores" scroll-y @scrolltolower="OnReachBottom">
			<view class="flex align-center flex-wrap px15 justify-between mb10">
				<view class="tuijian-box flex flex-direction mt15" @click="pushPage('/pages/goods/index?id='+item.id)"  v-for="(item,index) in goods" :key="index">
					<image :src="item.pic" class="tuijian-pic"></image>
					<view class="bg-white flex flex-direction px5 py10">
						<view class="f12 ellipsis2 mt5 bg-white ">{{ item.name }}</view>
						<text class="text-prices mt10">￥{{ item.money }}</text>
					</view>
				</view>
			</view>
		</scroll-view>
		
	</view>
</template>

<script>
import { mapState, mapActions } from 'vuex'
export default {
	data() {
		return {
			storepic:'',
			storename:'',
			storenum:0,
			storegznum:0,
			address:'',
			live:'',
			list:[],
			classactive:0,
			goods:[],
			collect:0,
			id:''
		}
	},
	onLoad(e) {
		this.id=e.id
	},
	onShow() {
		this.getData()
	},
	methods: {
		OnReachBottom(){
			this.getGoods()
		},
		async getData() {
			let {
				data:{store:{types,name,img,id,gzCount,goodCount,weizhi,isGz}}
			} = await this.$http.post('store.store', { storeId: this.id,lnt:this.userlnt,lat:this.userlat}, {tipConfig: { storeLoading: true } })
			this.list=types
			this.storepic=img
			this.storegznum=gzCount
			this.storenum=goodCount
			this.address=weizhi
			this.collect=isGz
			this.storename=name
			this.getGoods()
		},
		async getGoods() {
			if (this.finish) return
			let {
				data:{goods}
			} = await this.$http.post('store.fenleigoods', { page: this.page,goodTypeId:this.list[this.classactive].id,storeId:this.id },{storeLoading: true})
			this.finish = goods.length < 20
			!this.finish && (this.page += 1)
			this.goods = [...this.goods, ...goods]
		},
		choice(item,index){
			this.classactive=index
			this.clearGoods()
			this.getGoods()
		},
		async collects() {
			await this.$http.post('store.collect', { storeId: this.id }, { tipConfig: {storeLoading: true, isSuccessTip: true  } })
			this.getData()
			// if(this.collect==0){
			// 	this.collect=1
			// }else{
			// 	this.collect=0
			// }
		},
		clearGoods(){
			this.finish=false
			this.page=1
			this.goods=[]
		}
		
	}
}
</script>

<style lang="less">
.block10{
	width: 20rpx;
	height: 20rpx;
}
.stross{
	position: fixed;
	z-index: 1;
	top: 0;
	width: 100%;
	height: calc(var(--status-bar-height) + 480rpx );
}
.search-box{
	width: calc(100% - 116rpx);
	margin-right: 30rpx;
	height: 66rpx;
	border-radius: 30rpx;
	background-color: #F6F6F6;
}
.por{
	position: relative;
	z-index: 5;
}
.choice{
	color: #FE4725;
}
.block75{
	width: 150rpx;
	height: 150rpx;
}
.shop-live{
	width: 30rpx;
	height: 35rpx;
}
.h75{
	height: 150rpx;
}
.tuijian-box{
	width: 320rpx;
}
.tuijian-pic {
	width: 320rpx;
	height: 320rpx;
}
.blcok-live{
	width: 130rpx;
	height: 50rpx;
	background-image: linear-gradient(to top, #FE4725, #FF8463) !important;
	border-radius: 10rpx;
}
.block-box{
	width: calc(100% - 170rpx);
}
.class-address{
	width: 26rpx;
	height: 27rpx;
}
.store-line{
	width: 620rpx;
	height: 1rpx;
	background-color: #EBEBEB;
	margin-top: 30rpx;
}
.gzbox{
	width: 108rpx;
	height: 50rpx;
	border-radius: 30rpx;
	border: 0.5px solid #FE4725;
	color: #FE4725;
}
.add-pic{
	width: 20rpx;
	height: 20rpx;
	margin-right: 4rpx;
}
.maxaddress{
	word-wrap: break-word;
	width: 380rpx;
}
.class-choice{
	width: 120rpx;
	height: 4rpx;
	background-color: #FE4725;
}
.class-nochoice{
	width: 120rpx;
	height: 4rpx;
	background-color: #FFFFFF;
}
.ovscolle{
	overflow-x: scroll;
}
.w160{
	width: 160rpx;
}
.goods-box{
	width: 336rpx;
}
.goods-pic{
	width: 336rpx;
	height: 336rpx;
}
</style>
